<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			This HTML5 render kit adds support for HTML5 specific attributes which are unsupported by the JSF <code>UIForm</code> and
			<code>UIInput</code> components. So far in JSF 2.0 and 2.1 only the <code>autocomplete</code> attribute is supported in
			<code>UIInput</code> components. All other attributes are by design ignored by the JSF standard HTML render kit. This
			HTML5 render kit supports the following HTML5 specific attributes:
		</p>
		<ul>
			<li><code>UIForm</code>: <ul><li><code>autocomplete</code></li></ul></li>
			<li><code>UISelectBoolean</code>, <code>UISelectOne</code> and <code>UISelectMany</code>:
			<ul><li><code>autofocus</code></li></ul></li>
			<li><code>HtmlInputTextarea</code>: <ul><li><code>autofocus</code></li><li><code>maxlength</code></li>
			<li><code>placeholder</code></li><li><code>spellcheck</code></li><li><code>wrap</code></li></ul></li>
			<li><code>HtmlInputText</code>: <ul><li><code>type</code> (supported values are
			<code>text</code> (default), <code>search</code>, <code>email</code>, <code>url</code>, <code>tel</code>,
			<code>range</code>, <code>number</code> and <code>date</code>)</li><li><code>autofocus</code></li>
			<li><code>list</code></li><li><code>pattern</code></li><li><code>placeholder</code></li><li><code>spellcheck</code></li>
			<li><code>min</code></li><li><code>max</code></li><li><code>step</code></li></ul>(the latter three are only supported on <code>type</code> of
			<code>range</code>, <code>number</code> and <code>date</code>)</li>
			<li><code>HtmlInputSecret</code>: <ul><li><code>autofocus</code></li><li><code>pattern</code></li><li><code>placeholder</code></li></ul></li>
			<li><code>HtmlCommandButton</code>: <ul><li><code>autofocus</code></li></ul></li>
		</ul>
		<p>
			Note: the <code>list</code> attribute expects a <code>&lt;datalist&gt;</code> element which needs to be coded in
			"plain vanilla" HTML (and is currently, June 2012, only supported in Firefox 4 and Opera 11). See also
			<a href="http://www.html5tutorial.info/html5-datalist.php">HTML5 tutorial</a>.
		</p>
		
		<h3>Installation</h3>
		<p>
			To use the HTML5 render kit, register it as follows in <code>faces-config.xml</code>:
		</p>
		<pre class="prettyprint"><code class="lang-xml">
&lt;factory&gt;
    &lt;render-kit-factory&gt;org.omnifaces.renderkit.Html5RenderKitFactory&lt;/render-kit-factory&gt;
&lt;/factory&gt;
		</code></pre>

		<h3>Demo</h3>
		<p>
			This HTML5 render kit is enabled in this showcase web application. The below demo shows that the HTML5 
			attributes on JSF components are actually been rendered instead of ignored. Note that this page should have
			scrolled down to the demo when you opened it, this is because of the <code>autofocus</code> field :)
		</p>

		<h3>Mojarra ajax bug</h3>
		<p>
			Note that <code>&lt;f:ajax&gt;</code> of Mojarra 2.0.0-2.1.13 explicitly checks for <code>&lt;input type="text"&gt;</code>
			and ignores other types while preparing request parameters for ajax submit, resulting in <code>null</code> values
			in managed bean after an ajax submit. This has been reported as <a href="http://java.net/jira/browse/JAVASERVERFACES-2532">Mojarra issue 2532</a>
			and is fixed in Mojarra 2.1.14. This problem is thus completely unrelated to <code>Html5RenderKit</code>.
		</p>
 	</ui:define>

 	<ui:define name="demo">
 		<h:form>
		    <h:panelGrid columns="3">
		        <h:outputLabel for="text" value="Normal text" />
		        <h:inputText id="text" value="#{html5Bean.text1}" />
		        <h:outputText value="Supported in all browsers" />

		        <h:outputLabel for="autofocus" value="With autofocus" />
		        <h:inputText id="autofocus" value="#{html5Bean.text2}" autofocus="true" />
		        <h:outputLink value="http://www.wufoo.com/html5/attributes/02-autofocus.html">Since Firefox 4, Safari 5, Chrome 6, Opera 11 and IE 10</h:outputLink>

		        <h:outputLabel for="placeholder" value="With placeholder" />
		        <h:inputText id="placeholder" value="#{html5Bean.text3}" placeholder="username" />
		        <h:outputLink value="http://www.wufoo.com/html5/attributes/01-placeholder.html">Since Firefox 4, Safari 4, Chrome 10, Opera 11.10 and IE 10</h:outputLink>

		        <h:outputLabel for="passwordPlaceholder" value="Password with placeholder" />
		        <h:inputSecret id="passwordPlaceholder" value="#{html5Bean.secret}" placeholder="password" />
		        <h:outputLink value="http://www.wufoo.com/html5/attributes/01-placeholder.html">Since Firefox 4, Safari 4, Chrome 10, Opera 11.10 and IE 10</h:outputLink>

		        <h:outputLabel for="search" value="Search" />
		        <h:inputText id="search" type="search" value="#{html5Bean.search}" />
		        <h:outputLink value="http://www.wufoo.com/html5/types/5-search.html">Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 9</h:outputLink>

		        <h:outputLabel for="email" value="Email" />
		        <h:inputText id="email" type="email" value="#{html5Bean.email}" />
		        <h:outputLink value="http://www.wufoo.com/html5/types/1-email.html">Since Firefox 4, Chrome 6, Opera 10.6 and IE 10</h:outputLink>

		        <h:outputLabel for="url" value="URL" />
		        <h:inputText id="url" type="url" value="#{html5Bean.url}" />
		        <h:outputLink value="http://www.wufoo.com/html5/types/3-url.html">Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 10</h:outputLink>

		        <h:outputLabel for="phone" value="Phone (tel)" />
		        <h:inputText id="phone" type="tel" value="#{html5Bean.phone}" />
		        <h:outputLink value="http://www.wufoo.com/html5/types/2-tel.html">Since Firefox 4, Safari 5, Chrome 6, Opera 10.6 and IE 10</h:outputLink>

		        <h:outputLabel for="range" value="Range (between 1 and 10)" />
		        <h:inputText id="range" type="range" value="#{html5Bean.range}" min="1" max="10" />
		        <h:panelGroup>
			        <h:outputLink value="http://www.wufoo.com/html5/types/8-range.html" rendered="#{not facesContext.validationFailed}">Since Safari 4, Chrome 6, Opera 11 and IE 10</h:outputLink>
		            <h:message for="range" />
		        </h:panelGroup>

		        <h:outputLabel for="number" value="Number (between 7 and 13)" />
		        <h:inputText id="number" type="number" value="#{html5Bean.number}" min="7" max="13" />
		        <h:panelGroup>
			        <h:outputLink value="http://www.wufoo.com/html5/types/7-number.html" rendered="#{not facesContext.validationFailed}">Since Safari 4, Chrome 9 and Opera 11</h:outputLink>
		            <h:message for="number" />
		        </h:panelGroup>

		        <h:outputLabel for="date" value="Date" />
		        <h:inputText id="date" type="date" value="#{html5Bean.date}" converterMessage="Format must be yyyy-MM-dd">
		            <f:convertDateTime pattern="yyyy-MM-dd" />
		        </h:inputText>
		        <h:panelGroup>
		            <h:outputLink value="http://www.wufoo.com/html5/types/4-date.html" rendered="#{not facesContext.validationFailed}">Since Safari 5, Chrome 6 and Opera 10.6</h:outputLink>
		            <h:message for="date" />
		        </h:panelGroup>

		        <h:outputLabel for="textarea1" value="Textarea with maxlength of 20" />
		        <h:inputTextarea id="textarea1" value="#{html5Bean.text4}" maxlength="20" cols="22" />
		        <h:outputLink value="http://www.wufoo.com/html5/attributes/03-maxlength.html">Since Firefox 4, Safari 5, Chrome 6, Opera 11 and IE 10</h:outputLink>

		        <h:outputLabel for="textarea2" value="Textarea with placeholder" />
		        <h:inputTextarea id="textarea2" value="#{html5Bean.text5}" placeholder="some text" cols="22" />
		        <h:outputLink value="http://www.wufoo.com/html5/attributes/01-placeholder.html">Since Firefox 4, Safari 5, Chrome 10, Opera 11.50 and IE 10</h:outputLink>

		        <h:outputLabel for="textarea3" value="Textarea with spellcheck" />
		        <h:inputTextarea id="textarea3" value="#{html5Bean.text6}" spellcheck="true" cols="22" />
		        <h:outputLink value="http://www.wufoo.com/html5/attributes/17-spellcheck.html">Since Firefox 4, Safari 4, Chrome 10, Opera 11 and IE 10</h:outputLink>

		        <h:panelGroup />
		        <h:commandButton value="submit" />
		        <h:panelGroup>
		            <h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
		        </h:panelGroup>
		    </h:panelGrid>
		</h:form>
 	</ui:define>
</ui:composition>